<template>
	<view class="wrap" style="height: 100vh;">
		<view :style="{ height: `${statusBarHeight}px` }"></view>
			<!-- 自定义导航栏高度 并 居中 -->
		<view :style="{
		  height: `${barHeight}px`,
		  'line-height': `${barHeight}px`,
		  'text-align': 'center',
		}">
			<text>他说</text>
		</view>
		<view class="searchImgWrap">
			<view v-if="imgShow" class="searchLeft"></view>
			<view class="searchRight"></view>
		</view>
		 <view class="contentWrap">
			 <view class="avatarWrap" style="display: flex;justify-content: space-around;">
				 <view class="AvatarWrap">
					<image :src="getImgUrl('/img/name/women.png')" class="avatar" @click="changeSex(2)"/>
					<view class="choose"><uni-data-checkbox selectedColor="#FF7F22" v-model="sexVls" :localdata="womenRange"></uni-data-checkbox></view>
					<view class="sex" :style="{color: sexVls == 2 ? '#FF7F22;':'#000'}">女生</view>
				 </view>
				<view class="AvatarWrap">
					<image :src="getImgUrl('/img/name/man.png')" class="avatar" @click="changeSex(1)" />
					<view class="choose"><uni-data-checkbox selectedColor="#FF7F22" v-model="sexVls" :localdata="manRange"></uni-data-checkbox></view>
					<view class="sex" :style="{color: sexVls == 1 ? '#FF7F22;':'#000'}">男生</view>
				</view>
			 </view>
			 <view class="iptWrap" style="margin-top: 80rpx;">
				 <view class="name">起名姓氏</view>
				 <van-field
					:value="form.nickName"
					placeholder="请输入姓氏"
					@change="getNickname"
					:border="false"
				/>
			 </view>
			 <view class="iptWrap">
				 <view class="name">出生时间</view>
				 <van-field
					:disabled="true"
					:value="form.birthdayNew"
					placeholder="请选择出生时间"
					:border="false"
					is-link
					@tap="openChooseBirth('news')"
				/>
			 </view>
			 <view class="iptWrap">
				 <view class="name">名字类型</view>
				 <uni-data-checkbox selectedColor="#FF7F22" v-model="form.nameType" :localdata="nameTypeArr"></uni-data-checkbox>
			 </view>
			 <view v-if="imgShow"  class="btn" @tap="saveData">开始起名</view>
		 </view>
			<view style="position: relative; z-index: 999999999;">
				<van-popup
					:show="birthdayNewShow"
					round
					closeable
					position="bottom"
					custom-style="height: 660rpx"
					@close="onClose"
				>
				<view class="title">出生时间</view>
				<view class="show">
					<view>年</view>
					<view>月</view>
					<view>日</view>
					<view>时</view>
					<view>分</view>
				</view>
				<view class="boxWrap">
					<van-datetime-picker
					:min-hour=" minHour"
					  :max-hour="maxHour"
						style="margin-top: 40rpx;"
						:show-toolbar="disabledToolbar"
						type="datetime"
						:value="currentDate"
						:min-date="minDate"
						:max-date="maxDate"
						@input="onInput"
					/>
				</view>
				
				<view class="saveBtn" style="padding: 30rpx" @tap="getTimer">
					<van-button type="primary" block color="#FF7F22">完成</van-button>
				</view>
			</van-popup>
		</view>
	</view>
</template>
<script>
import moment from 'moment';
import { addNameAPI } from '../../../utils/api';
import { getImgUrl } from '../../../utils/common';
import { showInfoFunc } from '../../../utils/common'
export default {
    data(){
        return {
			imgShow: false,
            statusBarHeight:'',
            barHeight:'',
            sexVls:2,
			flag:true,
            womenRange: [{"value": 2,"text": ""	}],
            manRange:[{"value": 1,"text": ""	}],
            nameTypeArr:[{text:'单字名',value:'0'},{text:'双字名',value:'1'}],
            minHour: 10,
            maxHour: 20,
            minDate: new Date(1970).getTime(),
            maxDate: new Date().getTime() + '1',
            currentDate: new Date().getTime(),
            birthdayNewShow: false, // 出生日期是否打开弹框
            type:'news', // news出生时间公历 old出生时间农历 
            currentTime:'', // 临时存储选中时间
            disabledToolbar: false, // 禁用时间toolbar
            form:{
                nickName:'',
                nameType:'1',
                birthdayNew:'',
            },
           
        }
    },
    mounted() {
   	// 状态栏高度
   	this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight; 
   	// 胶囊数据
   	const { top, height } = wx.getMenuButtonBoundingClientRect();
   	// 自定义导航栏高度 = 胶囊高度 + 胶囊的padding*2, 如果获取不到设置为38
   	this.barHeight = height ? height + (top - this.statusBarHeight) * 2 : 38;
   },
   onLoad(){
		this.imgShow = showInfoFunc('起名') == undefined ? false: true
   },
    methods:{
        // 图片渲染
		getImgUrl,
        // 保存数据
        async saveData(){
			let _this = this;
            if(this.form.nickName == '' || this.form.birthdayNew == '' ){
                // Toast.fail('请把信息填写完整！');
                uni.showToast({
                    icon:'none',
                    title:'请把信息填写完整！'
                })
                return
            }
			if(this.flag){
				this.flag = false
				setTimeout(() => {
					_this.flag = true
				},4000)
				const params = {
				    familyName: this.form.nickName,
				    birthday: this.form.birthdayNew,
				    nameType: this.form.nameType,
				    sex: this.sexVls
				}
				const res = await addNameAPI(params);
				if(res.code == 200){
					const font = '起名中,请稍后'
					uni.navigateTo({
					    url:`../../../subPackagesA/pages/nameList/nameList?familyName=${params.familyName}&nameType=${params.nameType}&sex=${params.sex}&font=${font}`
					})
				}
				
				
			}
            
            
        },  

        // 给出生时间赋值
        getTimer(){
            if(this.type == 'news'){
                this.form.birthdayNew = this.currentTime;
            }else{
                this.form.birthdayOld = this.currentTime;
            }
            this.birthdayNewShow = false;
        },


        // 打开弹出框显示出生日期
        openChooseBirth(type){
            this.type = type
            this.birthdayNewShow = true
        },

        // 关闭弹窗
        onClose(){
            this.birthdayNewShow = false;
        },
        // 获取选择的时间
        onInput(e){
            this.currentTime = moment(e.detail).format("YYYY-MM-DD HH:mm:ss");
        },
        // 获取性别
        changeSex(sex){
			console.log("sex==============>",sex)
            // type == 'sex'? this.form.sex = sex : this.form.name = sex;
			this.sexVls = sex
        },
        // 获取昵称
        getNickname(e){
            console.log('e',e)
            this.form.nickName = e.detail;
        },
    }
}
</script>
<style lang="less">
.btn{
		margin-top: 40rpx;
		width: 622rpx;
		height: 88rpx;
		line-height: 88rpx;
		background: #FF7F22;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		color: #fff;
		text-align: center;
	}
	.iptWrap{
		margin-top: 30rpx;
		display: flex;
		align-items: center;
		width: 622rpx;
		height: 104rpx;
		border-radius: 98rpx 98rpx 98rpx 98rpx;
		opacity: 1;
		border: 2rpx solid #F0F0F0;
		.name{
			margin: 0 20rpx 0 40rpx;
			word-break: keep-all;
		}
	}
	.AvatarWrap{
		position: relative;
	}
	.avatar{
		width: 120rpx;
		height: 120rpx;
	}
	
	.sex{
		position: absolute;
		left: 30rpx;
	}
	.choose{
		position: absolute;
		bottom: 6rpx;
		left: 90rpx;
	}
	
	/* -----------------------外部背景，内容框-------------------------------- */
	
	.contentWrap{
		position: relative;
		margin: -40rpx 30rpx 30rpx 30rpx;
		width: 630rpx;
		padding: 30rpx;
		background-color: #fff;
		border-radius: 16rpx;
		z-index: 9999;
	}
	.searchImgWrap{
		display: flex;
		justify-content: space-around;
		align-items: center;
		margin: 30rpx;
	}
	.searchLeft{
		width: 280rpx;
		height: 86rpx;
		background: url('https://ctrlsoft.net.cn/app_static/hesaid/img/name/name.png') no-repeat;
		background-size: 100% 100%;
	}
	.searchRight{
		width: 248rpx;
		height: 248rpx;
		background: url('https://ctrlsoft.net.cn/app_static/hesaid/img/name/nameWrite.png') no-repeat;
		background-size: 100% 100%;
	}
	.dream{
		background-color: #fff;
		display: flex;
		align-items: center;
		padding-left: 20rpx;
	}
	 .wrap{
		width: 100%;
		background: url('https://ctrlsoft.net.cn/app_static/hesaid/img/oneiromancy/background.png') no-repeat;
		background-size: 100% 100%;
	}

.title{
    text-align: center; 
    margin-top: 30rpx;
}
.show{
    margin-bottom: 40rpx;
    margin-top: 40rpx; 
    display: flex; 
    justify-content: space-around; 
    color: #222229;
}
.boxWrap{
    height: 300rpx; 
    overflow: hidden;
}
// .sexWrap{
//     display: flex;
//     .sex{
//         width: 158rpx;
//         line-height: 44rpx;
//         background: #F8F8F9;
//         border-radius: 4rpx;
//         text-align: center;
//         color: #000;
//         margin-left: 20rpx;
//     }
// }




</style>